<template>
  <div class="collapse-card">
    <div v-if="collapsed === true" class="collapsed">
      <a-tooltip placement="right">
        <template #title>展开</template>
        <img src="/icon/bot.gif" style="width: 70px; cursor: pointer" @click="collapsedChange" />
      </a-tooltip>
    </div>
    <div v-else class="un-collapsed">
      <div class="header">
        <div style="display: flex; align-items: center">
          <img src="/icon/logo.svg" style="width: 30px" />
          <div style="font-size: 16px; font-weight: 600; margin-left: 8px; color: #ffffff">
            TOOL4J-AI
          </div>
        </div>
      </div>

      <div style="height: calc(100vh - 150px); overflow-y: auto; padding: 0 20px">
        <div
          v-for="menu in menuList"
          :class="currentPath === menu.path ? 'item-active' : 'item'"
          :key="menu.name"
          @click="getToPage(menu.path)"
        >
          <img class="item-icon" :src="menu['icon']" />
          <div class="item-text">{{ menu['name'] }}</div>
        </div>
        <div class="item">
          <img class="item-icon" src="/icon/feedback.svg" />
          <feedback class="item-text" />
        </div>
        <div class="sessions">
          <div style="display: flex; justify-content: space-between">
            <div style="color: #f5f5f5; font-weight: 600">历史对话</div>
            <img
              src="/icon/history.svg"
              style="width: 16px; cursor: pointer; margin-right: 4px"
              title="清空历史对话"
              @click="deleteAllSession"
            />
          </div>
          <div
            v-for="session in sessions"
            :class="
              selectedSessionId === session.id ? 'session-item session-item-active' : 'session-item'
            "
          >
            <div class="session-item-text" @click="getMessage(session.id)">{{ session.title }}</div>
            <img
              src="/icon/delete-white.svg"
              style="width: 12px; cursor: pointer; margin-top: 4px; margin-right: 4px"
              @click="deleteSession(session.id)"
              title="删除"
            />
          </div>
        </div>
      </div>

      <div v-if="logined" class="logout" @click="logout">退出登录</div>
      <div v-else class="login" @click="login">登录</div>
    </div>
  </div>
</template>

<script setup>
import Http from '@/api/http'
import router from '@/router'
import { isLogin, useUserStore } from '@/stores/user'
import Feedback from '@/views/component/feedback.vue'
import { message } from 'ant-design-vue'
import { onMounted, ref, watch } from 'vue'

const logined = ref(false)
const collapsed = ref(false)
const currentPath = ref('')
const menuList = ref([
  {
    icon: '/icon/chat.svg',
    name: 'AI 对话',
    path: '/chat'
  },
  {
    icon: '/icon/code2.svg',
    name: '代码生成器',
    path: '/agent/code-generator'
  },
  {
    icon: '/icon/agent3.svg',
    name: 'AI 智能体',
    path: '/agent'
  }
])
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  params: {}
})
const selectedSessionId = ref(null)
const sessions = ref([])

function login() {
  router.push('/login')
}

function logout() {
  const userInfoStore = useUserStore()
  userInfoStore.token = ''
  useUserStore.userInfo = {}
  message.info('已退出登录')
  router.go(0)
}

function getToPage(path) {
  router.push(path)
}

function collapsedChange() {
  collapsed.value = !collapsed.value
}

function getSessions() {
  Http.post('/api/chat/findSessionPage', queryParams.value).then((res) => {
    sessions.value = res.data.records
    queryParams.value['total'] = res.data.total
  })
}

function deleteAllSession() {
  Http.delete('/api/chat/deleteAllSession').then((res) => {
    message.info('已清空历史对话')
    getSessions()
    router.push('/chat')
  })
}

function getMessage(id) {
  router.push({
    path: '/chat',
    query: {
      id: id
    }
  })
}

function deleteSession(id) {
  Http.delete('/api/chat/deleteSession/' + id).then((res) => {
    router.push('/chat')
    getSessions()
  })
}

onMounted(() => {
  currentPath.value = router.currentRoute.value.path
  if (isLogin()) {
    logined.value = true
    getSessions()
  }
  watch(
    () => router.currentRoute.value.path,
    () => {
      currentPath.value = router.currentRoute.value.path
    },
    { immediate: true } // 立即执行一次，相当于初始化
  )
  watch(
    () => router.currentRoute.value.query.id,
    () => {
      selectedSessionId.value = router.currentRoute.value.query.id
    },
    { immediate: true } // 立即执行一次，相当于初始化
  )
})
</script>

<style>
.collapse-card {
  height: 100%;
}

.collapsed {
  height: 100%;
  padding-top: 20px 12px 0 10px;
}

.un-collapsed {
  width: 280px;
  height: 100%;
  background: linear-gradient(135deg, #6e8efb, #a777e3);
}

.header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.item {
  display: flex;
  align-items: center;
  border-radius: 12px;
  padding: 8px;
  transition: 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.1);
}

.item-active {
  display: flex;
  align-items: center;
  border-radius: 12px;
  padding: 8px;
  transition: 0.3s ease;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.item-icon {
  width: 20px;
  height: 20px;
}
.item-text {
  color: #ffffff;
  margin-left: 8px;
  letter-spacing: 1px;
  font-size: 14px;
}

.logout {
  margin: 20px 12px;
  padding: 8px 20px; /* 增加一些内边距，使按钮看起来更舒适 */
  background-color: rgba(255, 255, 255, 0.6);
  color: #585858;
  border: none; /* 移除默认的边框 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 改变鼠标悬停时的图标，提示用户可以点击 */
  transition: background-color 0.3s ease; /* 添加一个简单的过渡效果 */
  text-align: center;
  border-radius: 5px;
}

.logout:hover {
  color: #ffffff;
  background-color: #c9302c; /* 当鼠标悬停时改变背景颜色，提供视觉反馈 */
}

.login {
  margin: 20px 12px;
  padding: 10px 20px; /* 增加一些内边距，使按钮看起来更舒适 */
  background-color: #1677ff; /* 使用绿色来表示这是一个积极的操作 */
  color: white; /* 文字颜色设置为白色以增加对比度 */
  border: none; /* 移除默认的边框 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 改变鼠标悬停时的图标，提示用户可以点击 */
  transition: background-color 0.3s ease; /* 添加一个简单的过渡效果 */
  text-align: center;
  border-radius: 5px;
}

.login:hover {
  background-color: #006aff; /* 当鼠标悬停时改变背景颜色，提供视觉反馈 */
}

.sessions {
  margin-top: 20px;
  height: calc(100vh - 360px);
  overflow-y: auto;
  color: #ffffff;
}

.session-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 8px;
  padding: 4px;
  border-radius: 12px;
}

.session-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.session-item-active {
  background-color: rgba(0, 0, 0, 0.2);
}

.session-item-text {
  width: 180px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
